<template>
  <el-row>
    <el-col>
      <el-card>
        <!--搜索框开始-->
        <el-row :gutter="20">
          <el-col :span="8">
          </el-col>
          <el-col :span="16">
            <div class="m-4">
              <div class="block" style="float: right; margin-right: 10px;">
                <el-input
                    v-model="condition.addrDetail"
                    placeholder="详情信息"
                    clearable
                    @input="selectByPage(1)"
                    style="width: 150px"
                />
              </div>
              <div class="block" style="float: right; margin-right: 10px;">
                <el-select
                    v-model="condition.status"
                    placeholder="请选择订单状态"
                    style="width: 200px"
                    clearable
                    :value-on-clear=null
                    @change="selectByPage(1)">
                  <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                  />
                </el-select>
              </div>
            </div>
          </el-col>
        </el-row>
        <!--搜索框结束-->
        <!--表格开始-->
        <el-table  :data="pageInfo.list" border style="width: 100%;">
          <el-table-column prop="id" label="ID" />
          <el-table-column prop="user.username" label="用户名" />
          <!--<el-table-column prop="phone" label="手机号" />-->
          <!--<el-table-column prop="email" label="邮箱" />-->
          <el-table-column prop="createTime" label="创建时间" />
          <el-table-column prop="preOrderDate" label="预约日期" />
          <el-table-column prop="orderDetailList[0].scenicSpot.name" label="景点信息" />
          <el-table-column prop="payType" label="支付状态">
            <template #default="scope">
              <!--0-余额支付，1-支付宝，2-微信，3-银联，4-其它-->
              <el-tag v-if="scope.row.payType == 0" type="success">余额支付</el-tag>
              <el-tag v-else-if="scope.row.payType == 1" type="success">支付宝</el-tag>
              <el-tag v-else-if="scope.row.payType == 2" type="success">微信</el-tag>
              <el-tag v-else-if="scope.row.payType == 3" type="success">银联</el-tag>
              <el-tag v-else-if="scope.row.payType == 4" type="success">其它</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="订单状态">
            <!--0-未支付，1-已支付，2-已发货，3-已收货，4-退货退款，5-退换货，6-仅退款，7-售后，8-其它-->
            <template #default="scope">
              <el-tag v-if="scope.row.status == 0" type="danger">未支付</el-tag>
              <el-tag v-else-if="scope.row.status == 1" type="success">已支付</el-tag>
              <el-tag v-else-if="scope.row.status == 2" type="success">待使用</el-tag>
              <el-tag v-else-if="scope.row.status == 3" type="success">已使用</el-tag>
              <el-tag v-else-if="scope.row.status == 4" type="warning">售后</el-tag>
              <el-tag v-else-if="scope.row.status == 5" type="info">其它</el-tag>
            </template>
          </el-table-column>

          <el-table-column  label="订单详情">
              <template #default="scope">
                <el-popover placement="right" :width="400" trigger="hover">
                <template #reference>
                  <el-button style="margin-right: 16px" type="success">详情</el-button>
                </template>
                  <el-table :data="scope.row.orderDetailList" border>
                    <el-table-column label="门票类型">
                      <template #default="scope">
                        <el-tag v-if=" scope.row.ticketType== 1" type="danger">成人票</el-tag>
                        <el-tag v-else-if="scope.row.ticketType == 2" type="success">学生票</el-tag>
                        <el-tag v-else-if="scope.row.ticketType == 3" type="success">儿童票</el-tag>
                      </template>
                    </el-table-column>
                    <el-table-column prop="price" label="单价" />
                    <el-table-column prop="count" label="数量" />
                    <el-table-column prop="price" label="订单总价" />
                  </el-table>
                </el-popover>
              </template>


          </el-table-column>

          <el-table-column label="操作">
            <template #default="scope">
              <el-popconfirm
                  title="你确定要修改为已使用吗？"
                  confirm-button-text="确定"
                  cancel-button-text="取消"
                  @confirm="update(scope.row.id, scope.row.status)"
              >
                <template #reference>
                  <el-button style="margin-bottom: 10px;" type="warning" v-if="scope.row.status == 1">修改为已使用</el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <!--表格结束-->
        <!-- 分页开始 -->
        <el-row class="row-bg" justify="center">
            <el-pagination background layout="prev, pager, next"
                           :page-count="pageInfo.pages"
                           @update:current-page="selectByPage"
                           style="margin-top: 10px;"
                           v-model:current-page="pageInfo.pageNum" />
          </el-row>
        <!-- 分页结束 -->
      </el-card>
    </el-col>
  </el-row>
</template>

<script setup>
import {ref} from "vue";
import {ElMessage} from "element-plus";
import orderApi from "@/api/orderApi.js";
//服务器路径
const SERVER_ADDR = ref(import.meta.env.VITE_SERVER_ADDR);
//订单状态 0-未支付，1-已支付，2-已发货，3-已收货，4-退货退款，5-退换货，6-仅退款，7-售后，8-其它
const options = [
  {
    value: 1,
    label: '未支付'
  },
  {
    value: 2,
    label: '已支付'
  },
  {
    value: 3,
    label: '待使用'
  },
  {
    value: 4,
    label: '已使用'
  },
  {
    value: 5,
    label: '售后'
  },
  {
    value: 6,
    label: '其它'
  },
]
//搜索条件
const condition = ref({
  addrDetail: null,
  status: null
});
//分页的信息
const pageInfo = ref({
  pages: 0,
  pageSize: 0,
  pageNum: 0
});
//请求所有的数据
const selectByPage = (PageNum) => {
  orderApi.selectByPage(condition.value, PageNum, 10)
      .then(resp => {
        if (resp.code == 10000){
          pageInfo.value =resp.data
        }else {
          ElMessage.error(resp.msg)
        }
      })
}
const update = (id, status) => {
  const order = {
    id: id,
    status: status + 1
  }
  orderApi.update(order)
      .then(resp => {
        if (resp.code == 10000) {
          ElMessage.success(resp.msg);
          selectByPage(pageInfo.value.pageNum)
        }else {
          ElMessage.error(resp.msg);
        }
      })
}
selectByPage(1)
</script>

<style scoped>

</style>